<div>
  <app-group-member-list [currentConversation]="currentConversation"></app-group-member-list>

  <div class="group-info-content">
    <div class="info-item">
      <div class="label">群ID</div>
      <div class="content">{{ groupProfile.groupID }}</div>
    </div>

    <div class="info-item">
      <div class="label">
        群头像
        <i nz-icon nzType="edit" nzTheme="outline" *ngIf="editable"
          (click)="showEditFaceUrl = true;inputFocus(groupAvatar);$event.stopPropagation()"
          class="edit"></i>
      </div>
      <div class="content" *ngIf="!showEditFaceUrl">
        <im-avatar [src]="groupProfile.avatar"></im-avatar>
      </div>
      <input #groupAvatar [hidden]="!showEditFaceUrl" nz-input [(ngModel)]="avatar"
        placeholder="回车确认" (keydown.enter)="editFaceUrl()" (blur)="showEditFaceUrl = false">
    </div>

    <div class="info-item">
      <div class="label">群类型</div>
      <div class="content">{{ groupType}}</div>
    </div>
    <div class="info-item">
      <div class="label">
        群名称
        <i nz-icon nzType="edit" nzTheme="outline" *ngIf="editable" (click)="
          showEditName = true;inputFocus(groupName)" class="edit"></i>
      </div>
      <div class="content text-ellipsis" [title]="groupProfile.name" *ngIf="!showEditName">
        {{ groupProfile.name || '暂无' }}
      </div>
      <input #groupName [hidden]="!showEditName" autofocus nz-input [(ngModel)]="name"
        placeholder="回车确认" (keydown.enter)="editName()" (blur)="showEditName = false">
    </div>

    <div class="info-item">
      <div class="label">
        群介绍
        <i nz-icon nzType="edit" nzTheme="outline" *ngIf="editable" (click)="
          showEditIntroduction = true;inputFocus(groupIntroduction)" class="edit"></i>
      </div>
      <div class="long-content" [title]="groupProfile.introduction" *ngIf="!showEditIntroduction">
        {{ groupProfile.introduction || '暂无' }}
      </div>
      <input #groupIntroduction [hidden]="!showEditIntroduction" autofocus nz-input
        [(ngModel)]="introduction" placeholder="回车确认" (keydown.enter)="editIntroduction()"
        (blur)="showEditIntroduction = false">
    </div>
    <div class="info-item">
      <div class="label">
        群公告
        <i nz-icon nzType="edit" nzTheme="outline" *ngIf="editable" (click)="
          showEditNotification = true;inputFocus(groupNotification)
        " class="edit"></i>
      </div>
      <div class="long-content" [title]="groupProfile.notification" *ngIf="!showEditNotification">
        {{ groupProfile.notification || '暂无' }}
      </div>

      <input #groupNotification [hidden]="!showEditNotification" autofocus nz-input
        [(ngModel)]="notification" placeholder="回车确认" (keydown.enter)="editNotification()"
        (blur)="showEditNotification = false">
    </div>
    <div class="info-item" *ngIf="groupProfile.type !== 'Private'">
      <div class="label">
        申请加群方式
        <i nz-icon nzType="edit" *ngIf="editable" (click)="
          showEditJoinOption = true;
        " class="edit"></i>
      </div>
      <div class="content" *ngIf="!showEditJoinOption">{{ joinOptionMap[groupProfile.joinOption] }}
      </div>
      <nz-select [ngStyle]="{'width': '100%'}" [(ngModel)]="joinOption"
        (ngModelChange)="editJoinOption()" (blur)="showEditJoinOption = false"
        [hidden]="!showEditJoinOption">
        <nz-option nzValue="FreeAccess" nzLabel="自由加入"></nz-option>
        <nz-option nzValue="NeedPermission" nzLabel="需要验证"></nz-option>
        <nz-option nzValue="DisableApply" nzLabel="禁止加群"></nz-option>
      </nz-select>
    </div>
    <div class="info-item">
      <div class="label">
        群消息提示类型
        <i nz-icon nzType="edit" *ngIf="editable" (click)="
          showEditMessageRemindType = true;
        " class="edit"></i>
      </div>
      <div class="content" *ngIf="!showEditMessageRemindType">
        {{ messageRemindTypeMap[this.groupProfile.selfInfo.messageRemindType] }}
      </div>

      <nz-select [ngStyle]="{'width': '100%'}" [(ngModel)]="messageRemindType"
        (ngModelChange)="editMessageRemindType()" (blur)="showEditMessageRemindType = false"
        [hidden]="!showEditMessageRemindType">
        <nz-option nzValue="AcceptAndNotify" nzLabel="接收消息并提示"></nz-option>
        <nz-option nzValue="AcceptNotNotify" nzLabel="接收消息但不提示"></nz-option>
        <nz-option nzValue="Discard" nzLabel="屏蔽消息"></nz-option>
      </nz-select>
    </div>

    <div class="info-item">
      <div class="label">
        我的群名片
        <i nz-icon nzType="edit" (click)="showEditNameCard = true;inputFocus(groupNameCard)"
          class="edit"></i>
      </div>
      <div class="content cursor-pointer" *ngIf="!showEditNameCard">
        {{ groupProfile.selfInfo.nameCard || '暂无' }}
      </div>

      <input #groupNameCard [hidden]="!showEditNameCard" autofocus nz-input [(ngModel)]="nameCard"
        placeholder="回车确认" (keydown.enter)="editNameCard()" (blur)="showEditNameCard = false">
    </div>

    <div class="info-item">
      <div class="label" [ngClass]="{'active' : active}">全体禁言</div>
      <nz-switch [(ngModel)]="muteAllMembers" (ngModelChange)="changeMuteStatus()">
      </nz-switch>
    </div>
    <div *ngIf="isOwner">
      <a type="text" (click)="showChangeGroupOwner = true">转让群组</a>
      <input [hidden]="!showChangeGroupOwner" autofocus nz-input [(ngModel)]="newOwnerUserID"
        placeholder="新群主的userID" (keydown.enter)="changeOwner()"
        (blur)="showChangeGroupOwner = false">
    </div>
    <div>
      <a [ngStyle]="{'color': 'red'}" (click)="quitGroup()">退出群组</a>
    </div>
    <div *ngIf="showDissmissGroup">
      <a type="text" [ngStyle]="{'color': 'red'}" (click)="dismissGroup()">解散群组</a>
    </div>
  </div>
</div>
